<script setup>
import { ref, onMounted, reactive } from "vue";
import { subjectIndex, baomingAdd, baomingIndex } from "@/api";
import tableValue from "@/components/tableValue.vue";
import { useUserStore } from "@/stores/UserStore";
import { ElMessage } from "element-plus";
// 传递子组件表格数据
const tableData = reactive([]);

// 传递子组件的列配置数组
const columns = [
  { prop: "id", label: "序号", width: "150" },
  { prop: "name", label: "名称", width: "200" },
  { prop: "time", label: "时间", width: "200" },
  { prop: "timelong", label: "时长", width: "160" },
  { prop: "jiaolian", label: "教练", width: "160" },
  // 操作列（特殊列，无 prop）
  { label: "操作", type: "action1" },
];

// 信息条数
const total = ref(1);
// 搜索的字段信息
const SearchValue = ref("");
// 子组件展示报名按钮
const xinadd = ref(false);

// 报名要提交的参数
const useuserstore = useUserStore();
const keform = ref({
  huiyuanid: useuserstore.VipUser[0].id,
  huiyuanname: useuserstore.VipUser[0].id,
});

const kechenList = ref();

onMounted(async () => {
  hyglTable();
});

// 请求会员数据
const hyglTable = async (names = "", page = null) => {
  const res = await subjectIndex({
    name: names,
    pageNum: page || 1,
    pageSize: 5,
  });
  // console.log(names);

  total.value = res.total;
  tableData.length = 0;
  Object.assign(tableData, res.data);
  // console.log(total.value);
};

// 搜索功能
const searchType = (value) => {
  SearchValue.value = value;
  hyglTable(value.value);
};

// 分页功能
const pagess = ref(0);
const Page = async (pages) => {
  await hyglTable("", pages);
  pagess.value = pages;
};

// 报名弹窗
const baomingshow = ref(false);

// 点击子组件报名按钮，传递回来课程行数据
const VIPbaoming = (item) => {
  baomingshow.value = true;
  keform.value.jiaolian = item.jiaolian;
  keform.value.kcid = item.id;
  keform.value.kcname = item.name;
  keform.value.time = item.time;

  // console.log(item);
};
// console.log(keform.value);

// 确定报名
const handleConfirm = async () => {
  // 获取会员的报名的课程信息
  await baomingIndex({ huiyuanid: keform.value.huiyuanid }).then((res) => {
    kechenList.value = res.data;
    // console.log(res);
  });
  // console.log(kechenList.value);
  // 正确：用 some() 判断是否存在符合条件的元素
  const exists = kechenList.value.some(
    (item) => item.kcid === keform.value.kcid
  );
  // console.log(exists);

  if (exists) {
    ElMessage.warning("请勿重复报名");
  } else {
    baomingAdd(keform.value).then((res) => {
      if (res.code === 200) ElMessage.success(res.msg);
    });
  }

  baomingshow.value = false;
};
</script>

<template>
  可报名课程
  <tableValue
    :textList="tableData"
    :columns="columns"
    :total="Number(total)"
    :xinadd="xinadd"
    @SearchValue="searchType"
    @PageType="Page"
    @VIPbaoming="VIPbaoming"
  />

  <el-dialog v-model="baomingshow" title="课程报名" width="500" align-center>
    <span>是否确定报名该课程？</span>
    <template #footer>
      <el-button @click="baomingshow = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
